<template>
    <header :class="isCollapsed ? 'longHead':''">
        <div class="logo"></div>
        <i v-if="isCollapsed" class="el-icon-d-arrow-right" @click="setCollapse(false)"></i>
        <i v-if="!isCollapsed" class="el-icon-d-arrow-left" @click="setCollapse(true)"></i>
        <div class="sub-button">
            <el-dropdown @command="handleCommand1">
                  <span class="el-dropdown-link" style="color: white;font-size: 18px">
                       {{menus[menu]}}
                    <i class="el-icon-arrow-down" style="float: right;"></i>
                  </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="iel">{{ $t('partSys') }}</el-dropdown-item>
                    <el-dropdown-item command="iec">{{ $t('serviceSys') }}</el-dropdown-item>
                    <el-dropdown-item command="ser">{{ $t('maintainSys') }}</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <span v-if="user" style="position: fixed;right: 120px;">Welcome,{{user.username}}</span>
        <el-dropdown class="drop" @command="handleCommand">
              <span class="el-dropdown-link">
               <i class="el-icon-setting el-icon--right"></i>
              </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="logOut"><span @click="logOut">Log Out</span></el-dropdown-item>
                <el-dropdown-item>Forget Password</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
        <el-select v-model="language" size="mini" class="select" @change="change">
            <el-option
                    label="中文"
                    value="zh">
            </el-option>
            <el-option
                    label="English"
                    value="en">
            </el-option>
            <el-option
                    label="Indonesia"
                    value="indo">
            </el-option>
        </el-select>
    </header>
</template>


<script>
    import {mapGetters, mapMutations} from 'vuex'

    export default {
        data() {
            return {
                menus: {
                    iel: '配件系统',
                    iec: '服务站系统',
                    ser: '运营系统'
                }
            }
        },
        computed: {
            ...mapGetters(['isCollapsed', 'user', 'language', 'menu']),
        },

        created() {
            if (!this.user.username) {
                this.setUser(JSON.parse(localStorage.getItem('userInfo') || '{}'))
            }
            this.menus = {
                iel: this.$t('partSys'),
                iec: this.$t('serviceSys'),
                ser: this.$t('maintainSys'),
            }
        },
        methods: {
            handleCommand1(command) {
                this.changeMenu(command)
            },
            change(v) {
                this.changeLanguage(v)
            },
            setCollapse(f) {
                this.setIsCollapsed(f)
            },
            handleCommand(command) {
                switch (command) {
                    case 'logOut':
                        this.logOut();
                        break
                }
            },
            logOut() {
                this.$router.push('/')
            },
            ...mapMutations(['setIsCollapsed', 'changeMenu', 'setUser', 'changeLanguage'])
        },
        watch: {
            language(lang) {
                switch (lang) {
                    case "zh":
                        this.$i18n.locale = 'zh';
                        return;
                    case "en":
                        this.$i18n.locale = 'en';
                        return;
                    case "indo":
                        this.$i18n.locale = 'indo';
                        return;
                    default:
                        this.$i18n.locale = 'zh'

                }

            }
        }
    }
</script>

<style scoped lang="scss">
    @import "../../css/variable";

    header {
        text-align: left;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 100;
        height: 60px;
        line-height: 60px;
        width: calc(100% - 200px);
        font-size: $text-font;
        background: $bg-theme;
        color: #fff;
        transition: width .4s ease;
        &.longHead {
            width: calc(100% - 64px);
        }
        .logo {
            width: 20px;
            float: left;
            height: 60px;
            display: inline-block;
        }
        i {
            float: left;
            font-size: 20px;
            line-height: 60px;
            cursor: pointer;
        }
        .drop {
            position: fixed;
            top: 0;
            right: 30px;
            z-index: 100;
            color: #fff;
        }
        .select {
            width: 100px;
            position: fixed;
            top: 0;
            right: 270px;
        }
        .sub-button {
            display: inline-block;
            margin-left: 20px;
            vertical-align: top;
            z-index: 10;
            height: 60px;
            line-height: 60px;
            color: white;
            button {
                z-index: 10;
                border: 1px solid #ddd;
            }
        }
    }
</style>